<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个是标题颜色</title>
    <style>
        .image-container {
            position: relative;
            display: inline-block; /* 或者其他适合你布局的display类型 */
        }

        .image-container img {
            display: block; /* 防止图片下方有空隙 */
            width: 100%; /* 根据需要调整 */
            height: auto; /* 保持图片比例 */
        }

        .image-container #relative {
            position: absolute;
            width: 100%; /* 与图片同宽 */
            top: -30px; /* 根据需要调整，使标题显示在图片上方 */
            left: 0;
        }

        @keyframes scroll-left {
              from {
                transform: translateX(100%);
              }
              to {
                transform: translateX(-100%);
              }
            }
        .scrolling-text {
              position: absolute;
              top:0;
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              animation: scroll-left 20s linear infinite;  /* 控制滚动速度10s */
            }


    </style>
</head>
<body>
<div class="image-container">
    <img src="./海豚.jpg">

    <div class="scrolling-text">
        <h1 style="color: red" title="红色">helloworld</h1>
        <h2 style="color: yellow" title="黄色">helloworld</h2>
        <h3 style="color: blue" title="蓝色">helloworld</h3>
        <h4 style="color: green" title="hellohtml">helloworld</h4>
    </div>


</div>


</body>
</html>